<template>
  <div style="
  position: absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
                margin:auto;
                height:100%;
                width:370px;
">
    <div>
      <div style="width: 100%;height: 120px;margin-top: 5px;margin-bottom: 10px">
        <div style="width: 35%;height: 100%;float: left">
          <img src="./static/images/力合新图表.jpg" style="width: 100px;height: 100px;margin-top: 15px;
            float: left;border-radius: 50%;
            margin-left: 15px;box-shadow: 0 0 10px burlywood; /* 发光效果 */">
        </div>
        <div style="width: 65%;height: 100%;float: right">
          <span style="font-weight: bold;margin-left: 15px;font-size: 22px;float: left;border-radius: 50%;margin-top: 40px">2024年长护(上海)居家照护培训学员推荐页面</span>
        </div>
      </div>
      <hr>
    </div>
    <!--    报名信息-->
    <div class="centered-div" style="width: 350px;height: 60%;position: relative;left: 5px;float: left;">
      <h1>填写推荐信息</h1>
      <el-form ref="form" :model="form" required :rules="rules" label-width="80px" style="margin-top: 30px">
        <el-form-item required prop="bmName" label="姓名" style="float: left;">
          <el-input placeholder="请输入姓名" style="width: 240px" v-model="form.bmName"></el-input>
        </el-form-item>
        <el-form-item style="float: left;" required prop="bmTel" label="电话">
          <div style="width: 100%;height: 40px;">
            <el-input placeholder="请输入手机号码" v-model="form.bmTel" style="float: left;width: 240px"></el-input>
          </div>
        </el-form-item>
        <el-form-item style="float: left" required prop="bmUID" label="证件编号">
          <!--            <el-input placeholder="请输入身份证编号" style="width: 240px" v-model="form.bmUID" @change="idCard(form.bmUID)"></el-input>-->
          <el-input placeholder="请输入身份证编号" style="width: 240px" v-model="form.bmUID"></el-input>
        </el-form-item>
        <el-button type="primary" @click="onSubmit"
                   style="width:100%;background-color: burlywood;border:none;margin-top: 20px">提交订单
        </el-button>
      </el-form>
    </div>
<!--    <div style="width: 300px;height: 100px; position: relative;left: 40px;text-align: left;float: left;font-size: 14px;color: burlywood;margin-top: -160px">-->
<!--      提示：扫描这个二维码填写信息,将推荐你为{{this.name}}学员的创客老师。-->
<!--    </div>-->
  </div>

</template>
<script>
import {TuiJianF} from '@/api/WeiXin.js'
import wx from 'weixin-js-sdk'
import {Base64} from "js-base64";

export default {
  data() {
    return {
      form: {
        bmName: '',
        bmTel: '',
        bmUIDType: 1,
        bmUID: '',
        bmSex: 1,
        bmdateBirth: '',
        bmtype: '1990',
        bmid: '', //创客老师id
        lsname: '', //创客老师名称
        openid: '', //学员缴费的微信openid
      },
      rules: {
        bmtype: [{required: true, message: '请选择报名类型', trigger: 'blur'}],
        bmName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        bmTel: [{required: true, message: '请输入电话', trigger: 'blur'}],
        bmUIDType: [{required: true, message: '请输入证件类型', trigger: 'blur'}],
        bmUID: [{required: true, message: '请输入证件编号', trigger: 'blur'}],
        bmSex: [{required: true, message: '请输入性别', trigger: 'blur'}],
        bmdateBirth: [{required: true, message: '请输入出生年月', trigger: 'blur'}],
      },
      id: '',
      name: '',
      openid: '',
      type: '',
    };
  },
  methods: {
    //提交
    onSubmit() {
      this.$refs.form.validate(valid => {
        //在提交表单时执行验证逻辑
        if (valid) {
          if (this.form.bmUIDType === 1) {
            // 判断证件类型是否为身份证
            if (!/^\d{17}(\d|X|x)$/.test(this.form.bmUID)) {
              this.$message.warning('请输入有效的身份证号码')
              return
            }
            // 校验最后一位的校验码
            let weightFactor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
            let checkCode = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
            let sum = 0
            for (let i = 0; i < 17; i++) {
              sum += parseInt(this.form.bmUID.charAt(i)) * weightFactor[i]
            }
            let index = sum % 11
            if (checkCode[index] !== this.form.bmUID.charAt(17)) {
              this.$message.warning('请输入正确的身份证号码，校验码错误')
              return
            }
            // 校验出生日期
            const dateObj = new Date(this.form.bmUID.substring(6, 14).replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')) // 将字符串转换为日期对象
            this.form.bmdateBirth = dateObj
            let birthDateRegex = /(\d{4})(\d{2})(\d{2})/
            let birthDateMatch = birthDateRegex.exec(this.form.bmUID.substring(6, 14))
            if (!birthDateMatch) {
              this.$message.warning('请输入正确的身份证号码，出生日期格式错误')
              return
            }
            // 根据身份证号判断性别（奇数为男性，偶数为女性）
            this.form.bmSex = this.form.bmUID.charAt(16) % 2 === 0 ? 2 : 1
          }
          if (this.form.bmTel.length !== 11) {
            this.$message.warning('手机号码必须为11位！')
            return
          }
          if (this.form.bmName.length > 5) {
            this.$message.warning('姓名错误！')
            return
          }
          /**
           * 全部的表单验证通过、这里调用微信支付的接口
           */
          if (this.form.bmSex === 1) {
            this.form.bmSex = '男'
          } else {
            this.form.bmSex = '女'
          }
          if (this.form.bmUIDType === 1) {
            this.form.bmUIDType = '身份证'
          }
          if (this.form.bmUIDType === 2) {
            this.form.bmUIDType = '护照'
          }
          if (this.form.bmUIDType === 3) {
            this.form.bmUIDType = '其他'
          }
          this.form.bmid = this.id
          this.form.lsname = this.name
          this.form.openid = this.openid
          // console.log(this.form)
          /**
           *  调用后端微信接口预支付并拿到pay_id等参数,前端使用pay_id调用微信支付
           */
          var that =this;
          // let subData = 'openid=' + this.openid + '&type=' + this.form.bmtype
          TuiJianF(this.form).then(res => {
            console.log(res.data)
            if(res.data===666){
              this.showAccomplish()
            }else{
              this.$message.error("推荐绑定失败！")
            }
          })
        } else {
          // 表单验证不通过，提示错误信息
          this.$message.error('请填写必填项')
        }
      })
    },
    //页面跳转
    showAccomplish() {
      // 使用 $router.push() 方法进行页面跳转，并携带参数
      this.$router.push({
        name: 'FangFeiChengGong',
      })
    },
  },
  created() {
    // 接收二维码传过来的参数值
    function getParameterByName(name) {
      name = name.replace(/[\[\]]/g, '\\$&')
      var url = window.location.href
      var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
      var results = regex.exec(url)
      if (!results) return null
      if (!results[2]) return ''
      // 解码中文字符
      return decodeURIComponent(results[2].replace(/\+/g, ' '))
    }
    this.openid = getParameterByName("openid");
    this.name = Base64.decode(getParameterByName("name"));
    this.id = getParameterByName("id");

    // this.openid = 'openid';
    // this.name = 'name';
    // this.id = '0086';
  }
};
</script>
<style scoped>

</style>
